<template>
    <div class="pie">
        <div id="echart" ref="mychart"></div>
    </div>
</template>

<script>
// echarts相关
let echarts = require("echarts");
import { mapState } from "vuex";
export default {
  name: "Pie",
  data() {
    return {
      myChart: {}
    };
  },
  computed: {
    ...mapState(["movies", "imags", "news", "articles"]),
    opt() {
      let obj = {
        title: {
          text: "各目录数据统计",
          subtext: "根据数据库统计",
          x: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: ["新闻", "文章", "图片", "电影"]
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: [
              { value: this.news.length, name: "新闻" },
              { value: this.articles.length, name: "文章" },
              { value: this.imags.length, name: "图片" },
              { value: this.movies.length, name: "电影" }
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      };
      return obj;
    }
  },
  mounted() {
    this.setEchart();
  },
  updated() {
    console.log(this.news);
    this.setEchart();
  },
  methods: {
    setEchart() {
      let dom = this.$refs.mychart;
      this.myChart = echarts.init(dom);
      this.myChart.setOption(this.opt);
    }
  }
};
</script>

<style scoped lang='scss'>
#echart {
  width: 500px;
  height: 300px;
}
</style>